//  this library.
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:hktk_app/decoration/package/package_back_decoration.dart';
import 'package:hktk_app/painter/line_painter.dart';
import 'package:hktk_app/util/view_util.dart';

/// 购买页面的背景
class PackageBackWidget extends StatelessWidget {
  /// 最低一层的背景颜色起始
  final Color layer1Begin;

  /// 最低一层的背景颜色结束
  final Color layer1End;

  /// 第二层的白色内边框颜色
  final Color layer2Border;

  /// 第三层的背景边框颜色起始
  final Color layer3BorderBegin;

  /// 第三层的背景边框颜色结束
  final Color layer3BorderEnd;

  /// 第三层的背景颜色起始
  final Color layer3Begin;

  /// 第三层的背景颜色结束
  final Color layer3End;

  const PackageBackWidget(
      {super.key,
        required this.layer1Begin,
        required this.layer1End,
        required this.layer2Border,
        required this.layer3BorderBegin,
        required this.layer3BorderEnd,
        required this.layer3Begin,
        required this.layer3End});

  /// 蓝色卡片背景
  const PackageBackWidget.blue({super.key})
      : layer1Begin = colorBlue3,
        layer1End = colorBlue4,
        layer2Border = colorBlue18,
        layer3BorderBegin = colorBlue5,
        layer3BorderEnd = colorBlue13,
        layer3Begin = colorBlue6,
        layer3End = colorBlue7;

  /// 绿色卡片背景
  const PackageBackWidget.green({super.key})
      : layer1Begin = colorGreen1,
        layer1End = colorGreen2,
        layer2Border = colorGreen9,
        layer3BorderBegin = colorGreen3,
        layer3BorderEnd = colorGreen6,
        layer3Begin = colorGreen4,
        layer3End = colorGreen5;

  /// 深蓝色卡片背景
  const PackageBackWidget.darkBlue({super.key})
      : layer1Begin = colorBlue8,
        layer1End = colorBlue9,
        layer2Border = colorBlue19,
        layer3BorderBegin = colorBlue10,
        layer3BorderEnd = colorBlue14,
        layer3Begin = colorBlue11,
        layer3End = colorBlue12;

  /// 橙色卡片背景
  const PackageBackWidget.orange({super.key})
      : layer1Begin = colorOrange1,
        layer1End = colorOrange2,
        layer2Border = colorOrange10,
        layer3BorderBegin = colorOrange3,
        layer3BorderEnd = colorOrange7,
        layer3Begin = colorOrange4,
        layer3End = colorOrange5;

  /// 第一层背景
  get _layer1 => Container(
    width: 1.sw-60,
    height: 256,
    margin: EdgeInsets.only(left: 30),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(24)),
        gradient: LinearGradient(
            colors: [layer1Begin, layer1End],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight)),
  );

  /// 第二层背景
  get _layer2 => Container(
    width: 1.sw-60,
    height: 238,
    margin: EdgeInsets.only(top: 9),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
        color: colorWhite1,
        boxShadow: [
          BoxShadow(
              color: colorBlack2,
              offset: Offset(-2, 2), // 阴影 x轴 y轴 偏移量
              blurRadius: 8, // 阴影模糊程度
              spreadRadius: 0 // 阴影扩散程度
          )
        ]),
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.only(left: 20, top: 80),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(18),
          border: Border.all(
            color: colorGrey4,
            width: 2,
          )),
      child: _lineList,
    ),
  );

  /// 线条集合
  get _lineList => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      CustomPaint(painter: LinePainter(color: colorGrey4, length: 210)),
      hiSpace(height: 18),
      CustomPaint(painter: LinePainter(color: colorGrey4, length: 210)),
      hiSpace(height: 18),
      CustomPaint(painter: LinePainter(color: colorGrey4, length: 210)),
      hiSpace(height: 18),
      CustomPaint(painter: LinePainter(color: colorGrey4, length: 210)),
      hiSpace(height: 18),
      CustomPaint(painter: LinePainter(color: colorGrey4, length: 210))
    ],
  );

  /// 第三层背景
  get _layer3 => Container(
    width: 1.sw-60,
    height: 256,
    margin: EdgeInsets.only(left: 110),
    decoration: PackageBackDecoration(
        borderColorBegin: layer3BorderBegin,
        borderColorEnd: layer3BorderEnd,
        colorBegin: layer3Begin,
        colorEnd: layer3End),
    child: SvgPicture.asset(
      "images/package/package_card_layer3.svg",
      width:  1.sw-60,
      height: 256,
    ),

  );

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 1.sw-60,
      height: 256,
      child: Stack(
        children: [
          _layer1,
          _layer2,
          _layer3,
        ],
      ),
    );
  }
}
